{% extends 'home.html' %}
{% load custom_filters %}
{% load static %}

{% block content %}
<style>
    /* 全局样式优化 */
    body {
        background-color: #f8f9fa;
        color: #495057;
    }
    
    .stats-card {
        background: white;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        border-left: 4px solid #007bff;
    }
    
    /* 头部样式 - 与导航栏协调 */
    .stats-header {
        background: linear-gradient(135deg, #495057 0%, #6c757d 100%);
        color: white;
        padding: 25px;
        border-radius: 8px;
        margin-bottom: 25px;
        text-align: center;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    .stats-number {
        font-size: 2.5rem;
        font-weight: bold;
        margin: 0;
    }
    
    .stats-label {
        font-size: 1.1rem;
        margin: 5px 0 0 0;
        opacity: 0.9;
    }
    
    /* 概览卡片网格 */
    .overview-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }
    
    .overview-card {
        background: white;
        padding: 20px;
        border-radius: 8px;
        text-align: center;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        border-top: 4px solid transparent;
    }
    
    .overview-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    }
    
    /* 卡片颜色主题 - 与Bootstrap协调 */
    .overview-card.total { 
        border-top-color: #007bff; 
        background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
    }
    .overview-card.approved { 
        border-top-color: #28a745; 
        background: linear-gradient(135deg, #ffffff 0%, #f8fff9 100%);
    }
    .overview-card.pending { 
        border-top-color: #ffc107; 
        background: linear-gradient(135deg, #ffffff 0%, #fffef8 100%);
    }
    .overview-card.rejected { 
        border-top-color: #dc3545; 
        background: linear-gradient(135deg, #ffffff 0%, #fff8f8 100%);
    }
    .overview-card.cancelled { 
        border-top-color: #6c757d; 
        background: linear-gradient(135deg, #ffffff 0%, #f8f9f8 100%);
    }
    
    /* 图表容器 */
    .chart-container {
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        margin-bottom: 20px;
        border: 1px solid #e9ecef;
    }
    
    .chart-title {
        font-size: 1.3rem;
        font-weight: 600;
        margin-bottom: 20px;
        color: #495057;
        border-bottom: 2px solid #e9ecef;
        padding-bottom: 10px;
    }
    
    /* 表格样式 */
    .table-stats {
        background: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        border: 1px solid #e9ecef;
    }
    
    .table-stats table {
        width: 100%;
        margin: 0;
    }
    
    .table-stats th {
        background: #f8f9fa;
        font-weight: 600;
        padding: 15px;
        border: none;
        color: #495057;
        border-bottom: 2px solid #dee2e6;
    }
    
    .table-stats td {
        padding: 12px 15px;
        border-bottom: 1px solid #f1f3f4;
        color: #495057;
    }
    
    .table-stats tbody tr:hover {
        background-color: #f8f9fa;
    }
    
    /* 进度条样式 */
    .progress-bar-container {
        background: #e9ecef;
        height: 8px;
        border-radius: 4px;
        overflow: hidden;
        margin-top: 5px;
    }
    
    .progress-bar {
        height: 100%;
        background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
        transition: width 0.3s ease;
    }
    
    /* 证书类型徽章 */
    .badge-type {
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 500;
        color: white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    /* 行等高布局 */
    .row-equal-height {
        display: flex;
        flex-wrap: wrap;
    }
    
    .row-equal-height > [class*="col-"] {
        display: flex;
        flex-direction: column;
    }
    
    .row-equal-height .chart-container {
        flex: 1;
    }
    
    /* 搜索容器 */
    .search-container {
        margin-bottom: 20px;
        padding: 20px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        border: 1px solid #e9ecef;
    }
    
    .search-container input {
        width: 100%;
        padding: 10px 15px;
        border: 2px solid #e9ecef;
        border-radius: 6px;
        font-size: 1rem;
        margin-bottom: 15px;
        transition: border-color 0.3s ease;
    }
    
    .search-container input:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    }
    
    .search-container button {
        width: 100%;
        padding: 10px;
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .search-container button:hover {
        background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
    }
    
    /* 用户类型徽章 */
    .user-type-badge {
        display: inline-block;
        padding: 4px 8px;
        margin: 2px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 500;
        color: white;
        background: #6c757d;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    
    /* 徽章颜色主题 */
    .user-type-badge.kfc { 
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%); 
    }
    .user-type-badge.ph { 
        background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%); 
        color: #333; 
    }
    .user-type-badge.dwy { 
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%); 
    }
    .user-type-badge.kfv { 
        background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%); 
    }
    .user-type-badge.hma { 
        background: linear-gradient(135deg, #20c997 0%, #1ea085 100%); 
    }
    .user-type-badge.lz { 
        background: linear-gradient(135deg, #e83e8c 0%, #d63384 100%); 
    }
    .user-type-badge.ddl { 
        background: linear-gradient(135deg, #fd7e14 0%, #e55a00 100%); 
    }
    
    /* 响应式设计 */
    @media (max-width: 768px) {
        .overview-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .stats-number {
            font-size: 2rem;
        }
        
        .chart-container {
            padding: 15px;
        }
    }
    
    /* 页面过渡效果 */
    .page-transition {
        opacity: 0.8;
        transition: opacity 0.3s ease;
    }
</style>

<!-- 总体概览 -->
<div class="overview-grid">
    <div class="overview-card total">
        <div class="stats-number">{{ total_stats.total }}</div>
        <div class="stats-label">总证书数</div>
    </div>
    <div class="overview-card approved">
        <div class="stats-number">{{ total_stats.approved }}</div>
        <div class="stats-label">已审批</div>
    </div>
    <div class="overview-card pending">
        <div class="stats-number">{{ total_stats.pending }}</div>
        <div class="stats-label">待审批</div>
    </div>
    <div class="overview-card rejected">
        <div class="stats-number">{{ total_stats.rejected }}</div>
        <div class="stats-label">已撤回</div>
    </div>
    <div class="overview-card cancelled">
        <div class="stats-number">{{ total_stats.cancelled }}</div>
        <div class="stats-label">已废弃</div>
    </div>
</div>

<div class="row row-equal-height">
    <!-- 证书类型统计 -->
    <div class="col-md-6">
        <div class="chart-container">
            <h4 class="chart-title">证书类型分布</h4>
            <div class="table-stats">
                <table class="table">
                    <thead>
                        <tr>
                            <th>类型</th>
                            <th>总数</th>
                            <th>已审批</th>
                            <th>审批率</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for type_code, stats in type_stats.items %}
                        <tr>
                            <td>
                                <span class="badge-type" style="background: {% if type_code == 'KFC' %}linear-gradient(135deg, #28a745 0%, #20c997 100%){% elif type_code == 'PH' %}linear-gradient(135deg, #ffc107 0%, #ffb300 100%); color: #333{% elif type_code == 'DWY' %}linear-gradient(135deg, #17a2b8 0%, #138496 100%){% elif type_code == 'KFV' %}linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%){% elif type_code == 'HMA' %}linear-gradient(135deg, #20c997 0%, #1ea085 100%){% elif type_code == 'LZ' %}linear-gradient(135deg, #e83e8c 0%, #d63384 100%){% elif type_code == 'DDL' %}linear-gradient(135deg, #fd7e14 0%, #e55a00 100%){% else %}linear-gradient(135deg, #007bff 0%, #0056b3 100%){% endif %};">
                                    {% if type_code == 'KFC' %}KFC
                                    {% elif type_code == 'KFV' %}KFV
                                    {% elif type_code == 'PH' %}PH
                                    {% elif type_code == 'DWY' %}DWY
                                    {% elif type_code == 'HMA' %}HMA
                                    {% elif type_code == 'LZ' %}LZ
                                    {% elif type_code == 'DDL' %}DDL
                                    {% else %}{{ type_code }}{% endif %}
                                </span>
                            </td>
                            <td><strong>{{ stats.total }}</strong></td>
                            <td>{{ stats.approved }}</td>
                            <td>
                                {% if stats.total > 0 %}
                                    {% widthratio stats.approved stats.total 100 %}%
                                    <div class="progress-bar-container">
                                        <div class="progress-bar" style="width: {% widthratio stats.approved stats.total 100 %}%;"></div>
                                    </div>
                                {% else %}
                                    0%
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 最近12个月趋势 -->
    <div class="col-md-6">
        <div class="chart-container">
            <h4 class="chart-title">最近12个月趋势</h4>
            <div style="position: relative; height: 300px;">
                <canvas id="recentChart"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- 用户搜索功能 -->
<div class="row">
    <div class="col-12">
        <div class="search-container">
            <h4 class="chart-title">用户搜索</h4>
            <form method="get" id="searchForm">
                <input type="text" name="search" placeholder="输入用户名或姓名进行搜索..." value="{{ search_query|default:'' }}">
                <button type="submit">搜索</button>
            </form>
        </div>
    </div>
</div>

<!-- 用户详细信息表格 -->
<div class="row">
    <div class="col-12">
        <div class="chart-container">
            <h4 class="chart-title">用户证书数量统计</h4>
            <div class="table-stats">
                <table class="table">
                    <thead>
                        <tr>
                            <th>用户</th>
                            <th>证书总数</th>
                            <th>已审批</th>
                            <th>待审批</th>
                            <th>已撤回</th>
                            <th>已废弃</th>
                            <th>KFC</th>
                            <th>KFV</th>
                            <th>PH</th>
                            <th>DWY</th>
                            <th>HMA</th>
                            <th>LZ</th>
                            <th>DDL</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for user, stats in user_stats.items %}
                        <tr>
                            <td><strong>{{ user }}</strong></td>
                            <td><strong>{{ stats.total }}</strong></td>
                            <td>{{ stats.approved }}</td>
                            <td>{{ stats.pending }}</td>
                            <td>{{ stats.rejected }}</td>
                            <td>{{ stats.cancelled }}</td>
                            <td>
                                {% if user in user_type_details %}
                                    {% with user_types=user_type_details|get_item:user %}
                                        {% if user_types.KFC > 0 %}
                                            <span class="user-type-badge kfc">{{ user_types.KFC }}</span>
                                        {% else %}
                                            <span class="text-muted">0</span>
                                        {% endif %}
                                    {% endwith %}
                                {% else %}
                                    <span class="text-muted">0</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if user in user_type_details %}
                                    {% with user_types=user_type_details|get_item:user %}
                                        {% if user_types.KFV > 0 %}
                                            <span class="user-type-badge kfv">{{ user_types.KFV }}</span>
                                        {% else %}
                                            <span class="text-muted">0</span>
                                        {% endif %}
                                    {% endwith %}
                                {% else %}
                                    <span class="text-muted">0</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if user in user_type_details %}
                                    {% with user_types=user_type_details|get_item:user %}
                                        {% if user_types.PH > 0 %}
                                            <span class="user-type-badge ph">{{ user_types.PH }}</span>
                                        {% else %}
                                            <span class="text-muted">0</span>
                                        {% endif %}
                                    {% endwith %}
                                {% else %}
                                    <span class="text-muted">0</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if user in user_type_details %}
                                    {% with user_types=user_type_details|get_item:user %}
                                        {% if user_types.DWY > 0 %}
                                            <span class="user-type-badge dwy">{{ user_types.DWY }}</span>
                                        {% else %}
                                            <span class="text-muted">0</span>
                                        {% endif %}
                                    {% endwith %}
                                {% else %}
                                    <span class="text-muted">0</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if user in user_type_details %}
                                    {% with user_types=user_type_details|get_item:user %}
                                        {% if user_types.HMA > 0 %}
                                            <span class="user-type-badge hma">{{ user_types.HMA }}</span>
                                        {% else %}
                                            <span class="text-muted">0</span>
                                        {% endif %}
                                    {% endwith %}
                                {% else %}
                                    <span class="text-muted">0</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if user in user_type_details %}
                                    {% with user_types=user_type_details|get_item:user %}
                                        {% if user_types.LZ > 0 %}
                                            <span class="user-type-badge lz">{{ user_types.LZ }}</span>
                                        {% else %}
                                            <span class="text-muted">0</span>
                                        {% endif %}
                                    {% endwith %}
                                {% else %}
                                    <span class="text-muted">0</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if user in user_type_details %}
                                    {% with user_types=user_type_details|get_item:user %}
                                        {% if user_types.DDL > 0 %}
                                            <span class="user-type-badge ddl">{{ user_types.DDL }}</span>
                                        {% else %}
                                            <span class="text-muted">0</span>
                                        {% endif %}
                                    {% endwith %}
                                {% else %}
                                    <span class="text-muted">0</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="{% static 'js/chart.js' %}"></script>
<script>
// 最近12个月趋势图
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('recentChart').getContext('2d');
    const recentChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [{% for item in recent_stats %}'{{ item.date }}'{% if not forloop.last %},{% endif %}{% endfor %}],
            datasets: [{
                label: '证书数量',
                data: [{% for item in recent_stats %}{{ item.count }}{% if not forloop.last %},{% endif %}{% endfor %}],
                borderColor: '#007bff',
                backgroundColor: 'rgba(0, 123, 255, 0.1)',
                tension: 0.4,
                fill: true,
                pointRadius: 4,
                pointHoverRadius: 6
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            animation: false, // 禁用动画
            interaction: {
                intersect: false,
                mode: 'index'
            },
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    titleColor: 'white',
                    bodyColor: 'white'
                }
            },
            scales: {
                x: {
                    grid: {
                        display: false
                    }
                },
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1,
                        callback: function(value) {
                            return Number.isInteger(value) ? value : '';
                        }
                    },
                    grid: {
                        color: 'rgba(0, 0, 0, 0.1)'
                    }
                }
            }
        }
    });
});
</script>

{% endblock %}

